<template>
  <div class="container" @touchstart="onStart" @touchmove="onMove" @touchend="onEnd">
    <div class="fullpage" :class="{ horizontal: isHorizontal }">
      全屏
      <div>
        <button @click="add">横向全屏</button>
      </div>
      <div class="point" :style="style"></div>
    </div>
  </div>
</template>
<script>
import { mat2d, vec2 } from '../../libs/glmatrix/gl-matrix-min.js'
export default {
  data() {
    return {
      isHorizontal: false,
      style: {}
    }
  },
  methods: {
    onStart(e) {
      let { touches } = e
      let [touch] = e.touches
      let { clientX, clientY } = touch
      let v = [clientX, clientY]
      let origin = [0, 0]
      let m = mat2d.create()
      let win = $(window)
      let ww = win.width()
      let wh = win.height()
      //Ax = b
      mat2d.translate(m, m, [ww, 0])
      mat2d.rotate(m, m, Math.PI / 2)
      let mi = mat2d.create()
      mat2d.invert(mi, m)

      let v2 = mat2d.create()
      vec2.transformMat2d(v2, v, mi)
      console.log(v2)

      this.style = {
        transform: `translate(${v2[0]}px,${v2[1]}px)`
      }
      //console.log(this.style)
    },
    add() {
      this.isHorizontal = true
      console.log(`helloworld`)
      //100
    }
  },
  mounted() {
    console.log(`helloworld`)
  }
}
</script>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.fullpage {
  width: 100vh;
  height: 100vw;
  border: 1px solid #000;
  box-sizing: border-box;
  position: relative;
  &.horizontal {
    width: 100vh;
    height: 100vw;
    transform: translate(100vw, 0) translate(-50vh, -50vw) rotate(90deg) translate(50vh, 50vw);
  }
}
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
.point {
  width: 3px;
  height: 3px;
  border: 1px solid #000;
  position: absolute;
  left: 0;
  top: 0;
}
</style>
